<!--
 * @Description: 
 * @version: 
 * @Author: hui.wang01
 * @Date: 2021-03-18 15:19:13
 * @LastEditors: hui.wang01
-->
<template>
<div class="modal popup-modal" v-show="show" @click.stop="close">
  <div :class="[!show?'popDown':'popup']" @click.stop="contentClick">
    <div class="popup-head">
      <div class="popup-head-title">帮助与反馈</div>
      <div class="popup-close " @click.stop="close">×</div>
    </div>
    <div class="page-section">
      <div class="page-section-title">问题与反馈</div>
      <div class='suggest-info'>
        <div class='text'>
              <textarea placeholder="请填写您遇到的问题以便我们提供更好的帮助" placeholder-class="place-holder" :maxlength="maxLimit" @input="inputInfo"></textarea>
          </div> 
        <div class='word_limit'> 
            <div style="color:#CCCCCC">
              {{description.length}}
            </div>
          /{{maxLimit}}
        </div>
      </div>
      <div class="page-section-title">图片(选填，提供问题截图)</div>
      
      <div class="image-container">
        <div v-for="(item, index) in imageList" :key="index" class="image-wrap">
          <div class="cancel-icon" @click.stop="removeImage(index)">×</div>
          <img :src="item" class="upload-base" />
        </div>
        <div v-show="imageList.length < limitCount" role="button" class="upload-btn">
          <input ref="fileInput" type="file" accept="image/*"  />
        </div>
      </div>
      <div  class="confirm-btn-container ">
        <div :class="['confirm-btn', description.length==0 || isSubmitting?'disabled':'']" @click.stop="confirm">提交</div>
      </div>
    </div> 
  </div>
</div>
</template>
<script>
import './index.css'
import { default as uploadImg, savePopform} from '@/utils/upload.js'
export default {
  name: 'YiPopup',
  props:{
    show: {
        type: Boolean,
        default: false
    },
    clickModalToClose: {
      type: null,
      default: 'false'
    },
    platform: {
      type: String,
      default: 'ih-crm',
      required: true
    },
    requestHost: {
      type: String,
      default: '',
      required: true
    }
  },
  data() {
    return {
      showPop: this.show ,
      isSubmitting: false, // 是否正在提交
      maxLimit: 200, // 输入框maxLength
      limitCount: 4, // 上传图片数量限制
      imageList: [], // 图片
      description: '', // 问题描述
      isUploading: false // 是否正在上传图片 
    }
  },
  mounted(){    
     
    this.$refs.fileInput.addEventListener('change', this.uploadImgChange);    
  },
  beforeDestroy() {     
    this.$refs.fileInput.removeEventListener('change', this.uploadImgChange)
  },
  methods:{
    close() {
      this.show = false
    },
    contentClick(){},
    stop() {},
    inputInfo(e) {
      this.description =  e.target.value
    },
    /**
     * 图片压缩
     */
    minimal (e) {
      return e.replace(/\?(.*)/, '').concat('?imageView2/3/w/100/h/100')
    },
    // 删除图片时触发
    removeImage(e) {
      const index = e.target.dataset.index
      this.imageList.splice(index, 1)     
    },
    /**
     * 上传图片
     */
    uploadImgChange(e) {
      const type = e.target.files[0].type.toLowerCase()
      const size = e.target.files[0].size
      if (!['image/png', 'image/jpeg', 'image/jpg'].includes(type)) {
        this.toast('格式错误')
        this.$refs.fileInput.value = null
        return
      }
      if (size >= 10000000) {
        this.toast('请上传10M以内图片')
        this.$refs.fileInput.value = null
        return
      }
      // todo: 加载中样式
      // this.showLoading()
      console.log('上传图片', e.target.files)
      Promise.all(
          Array
          .from(e.target.files)
          .slice(0, this.limitCount)
          .map(p => uploadImg(p, 1024,this.requestHost)))
        .then(res => {
          this.imageList = this.imageList.concat(res.map(p => {

            if(p.code !== 0)  {
              console.log('error', p)
              console.log('onError', p.errmsg)
            }
            return p.data.url
          })).slice(0, this.limitCount).filter((item) => item);
          this.$refs.fileInput.value = null
        }).catch(() => {
        }).finally((item) => {
          console.log(item)
          // todo
          // this.hideLoading()
        });
    }, 
    /**
     * 提交信息
     */
    confirm() {
      const that = this
      const {
        requestHost, description, imageList, platform
      } = this
      that.isSubmitting = true
      console.log(requestHost, description, imageList, platform)
      const formData = {
        description,
        images: imageList,
        platform
      }

      savePopform(formData,requestHost).then(res => {
        console.log('提交成功',res)
        that.isSubmitting = false
        this.close()
        // todo 改成toast提示
        // that.showInfo('提交成功')
      }, err => {
         console.log(err.errormsg || '未知错误')
        // todo 改成toast提示
        // that.showInfo(err.errormsg || '未知错误')
      }).finally(()=>{
        
      })
   
    },
    showInfo(text, duration = 2000) {
      // wx.showToast({
      //   title: text,
      //   icon: 'none',
      //   duration
      // })
      console.log(text,duration)
    },
  }
  
}
</script>